<template>
	<view class="page">
		<view class="padding bg-white flex align-center justify-between">
			<u-icon size="24rpx" color="#999" name="arrow-left" @click="goBack"></u-icon>
			<view class="flex-1">
				<u-text align="center" text="《5以内的加减法》" size="28rpx" color="#333" bold></u-text>
			</view>
			<u-icon size="24rpx" color="#999" name="arrow-right" @click="goBack"></u-icon>
		</view>
		<view class="main">
			<view>
				<u-text margin="0 0 20rpx 0" size="32rpx" color="#333" bold text="练习题1"></u-text>
				<view class="bg-white radius-lg padding">
					<view class="flex">
						<view class="flex-1">
							<u-text text="单选题 偏难" size="32rpx" color="#333" bold></u-text>
						</view>
						<view>
							<u-text align="right" text="2024-山西太原·一模" size="32rpx" color="#333" bold></u-text>
						</view>
					</view>
					<view>
						<image src="/static/image/img-math.png" mode="widthFix" style="width: 100%;height: 100%;">
						</image>
					</view>
				</view>
			</view>

			<PopupBox :show="showPopup" :top="0">
				<view class="popup-item" v-for="i in 4" :key="i" @click="handleKnowledgeClick(i)">
					<u-text align="center" text="5以内的加减法" size="32rpx" color="#333"></u-text>
				</view>
			</PopupBox>

			<u-picker :closeOnClickOverlay="true" :show="showQuestionTypePicker" :columns="questionTypeList"
				@confirm="handleQuestionTypePickerConfirm" @cancel="handlePickerCancel" @close="handlePickerCancel"></u-picker>
			<u-picker :closeOnClickOverlay="true" :show="showDifficultyPicker" :columns="difficultyList"
				@confirm="handleDifficultyPickerConfirm" @cancel="handlePickerCancel" @close="handlePickerCancel"></u-picker>
			<u-picker :closeOnClickOverlay="true" :show="showAreaPicker" :columns="areaList"
				@confirm="handleAreaPickerConfirm" @cancel="handlePickerCancel" @close="handlePickerCancel"></u-picker>

			<u-modal :show="showPrintModal" :showCancelButton="true" @confirm="handlePrintConfirm"
				@cancel="showPrintModal = false">
				<view>
					<view>
						<u-button size="large" shape="circle" :color="themePrimary" text="立即打印"></u-button>
						<u-text margin="20rpx 0 0 0" text="注：当前手机设备连接打印机后立即打印，请保障手机和打印机连接同一wifi网络" size="28rpx"
							color="#666"></u-text>
					</view>
					<view class="margin-top-sm">
						<u-button customStyle="color:#333" color="#eee" size="large" shape="circle" text="提交打印中心"></u-button>
						<u-text margin="20rpx 0 0 0" text="注：提交到电脑教务系统打印中心打印。" size="28rpx" color="#666"></u-text>
					</view>
				</view>
			</u-modal>
		</view>
		<view class="footer gap">
			<view @click="showPrintModal = true">
				<u-icon name="/static/image/teacher/icon-print.png" size="48rpx" color="#999"></u-icon>
				<u-text align="center" text="打印" size="20rpx" color="#999" bold></u-text>
			</view>
			<view class="flex-1">
				<u-button size="large" shape="circle" :color="themePrimary" text="保存" @click="save"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTheme } from '@/composables/useTheme';
import Card from '@/components/Card/index.vue';
import PopupBox from '@/components/PopupBox/index.vue';
const { themePrimary } = useTheme();
const id = ref(0);
const showPopup = ref(false);
const showQuestionTypePicker = ref(false);
const showDifficultyPicker = ref(false);
const showAreaPicker = ref(false);
const showPrintModal = ref(false);
const questionTypeList = ref([['单选题', '多选题', '判断题']]);
const difficultyList = ref([['偏易', '偏难', '偏中']]);
const areaList = ref([['全国', '山西', '太原']]);
onLoad((options) => {
	id.value = options.id;
});

const toPreviewClick = () => {
	uni.navigateTo({
		url: `/pages/teacher/createExercise/preview?id=${id.value}`
	});
}

const save = () => {
	console.log('save')
	uni.showToast({
		title: '保存成功',
		icon: 'none'
	})
}

const handleKnowledgeClick = (item) => {
	console.log('item', item)
	showPopup.value = false
}

const handleQuestionTypePickerConfirm = (e) => {
	console.log('e', e)
	showQuestionTypePicker.value = false
}

const handleDifficultyPickerConfirm = (e) => {
	console.log('e', e)
	showDifficultyPicker.value = false
}

const handleAreaPickerConfirm = (e) => {
	console.log('e', e)
	showAreaPicker.value = false
}

const handlePickerCancel = () => {
	showQuestionTypePicker.value = false
	showDifficultyPicker.value = false
	showAreaPicker.value = false
}

const handlePrintConfirm = () => {
	console.log('handlePrintConfirm')
	showPrintModal.value = false
}
</script>
<style scoped lang="scss">
.student-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40rpx;
	padding: 30rpx;
}

.student-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.popup-item {
	padding: 20rpx 40rpx;
}

.footer {
	box-shadow: 0rpx -4rpx 36rpx 0rpx rgba(234, 245, 255, 1);
}
</style>
